<template>
  <div class="lookExamDetails">
    <!-- 单选 -->
    <div class="danxuan" v-show="danxuan.length != 0">
      <h3>单选题</h3>
      <div v-for="item in danxuan" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-radio
          disabled
          v-for="(item2, index2) in item.choice"
          v-model="item.studentAnswer"
          :key="index2"
          :label="index2"
          style="width: 100%"
        >
          {{ item2 }}
        </el-radio>
      </div>
    </div>

    <!-- 填空题 -->
    <div class="tiankong" v-show="tiankong.length != 0">
      <h3>填空题</h3>
      <div v-for="item in tiankong" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-input
          disabled
          type="textarea"
          :rows="5"
          v-model="item.studentAnswer"
        >
        </el-input>
      </div>
    </div>

    <!-- 多选 -->
    <div class="duoxuan" v-show="duoxuan.length != 0">
      <h3>多选题</h3>
      <div v-for="item in duoxuan" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-checkbox-group v-model="item.studentAnswer">
          <el-checkbox
            disabled
            v-for="(item2, index2) in item.choice"
            :key="index2"
            size="small"
            :label="item2"
            style="width: 100%"
          ></el-checkbox>
        </el-checkbox-group>
      </div>
    </div>

    <!-- 判断 -->
    <div class="panduan" v-show="panduan.length != 0">
      <h3>判断题</h3>
      <div v-for="item in panduan" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-radio disabled v-model="item.studentAnswer" label="0"
          >正确</el-radio
        >
        <el-radio disabled v-model="item.studentAnswer" label="1"
          >错误</el-radio
        >
      </div>
    </div>

    <!-- 简答题 -->
    <div class="tiankong" v-show="jianda.length != 0">
      <h3>简答题</h3>
      <div v-for="item in jianda" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-input
          disabled
          type="textarea"
          :rows="5"
          v-model="item.studentAnswer"
        >
        </el-input>
      </div>
    </div>

    <!-- 程序题 -->
    <div class="tiankong" v-show="chengxu.length != 0">
      <h3>程序题</h3>
      <div v-for="item in chengxu" :key="item.questionId">
        <p>第{{ item.questionId }}题 {{ item.questionTm }}</p>
        <el-input
          disabled
          type="textarea"
          :rows="5"
          v-model="item.studentAnswer"
        >
        </el-input>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  props: ["eid"],
  data() {
    return {
      question: [],
      danxuan: [], //单选
      duoxuan: [], //多选
      tiankong: [], //填空题
      panduan: [], //填空题
      jianda: [], //简答题
      chengxu: [], //程序题
      checked: [],
    };
  },
  methods: {
    //获取试卷信息
    getExam() {
      axios
        .get(`/v1/teachers/searchTm/${this.eid}`)
        .then((res) => {
          if (res.data.status == 200) {
            this.question = JSON.parse(res.data.data[0].e_sj);
            // console.log(res.data)

            for (let i = 0; i < this.question.length; i++) {
              //单选
              if (this.question[i].questionType == "1") {
                this.danxuan.push(this.question[i]);
              } else if (this.question[i].questionType == "2") {
                //填空
                this.tiankong.push(this.question[i]);
              } else if (this.question[i].questionType == "3") {
                //多选
                this.duoxuan.push(this.question[i]);
              } else if (this.question[i].questionType == "4") {
                //判断
                this.panduan.push(this.question[i]);
              } else if (this.question[i].questionType == "5") {
                //简答
                this.jianda.push(this.question[i]);
              } else if (this.question[i].questionType == "6") {
                //程序
                this.chengxu.push(this.question[i]);
              }
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getExam();
  },
};
</script>
<style lang="scss">
.lookExamDetails {
  margin-top: 20px;
  width: 100%;
}
</style>